<template>
    <div id="Register">
        <div class="loginWraper">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <p class="title">注册</p>
     <el-form-item label="用户名:" prop="username">
    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码:" prop="password">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码:" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    <router-link to="/login">登录</router-link>
  </el-form-item>
</el-form>
</div>
    </div>
</template>
<script>
import {RegisterRequest} from '../../http/api'
export default {
  name: ' Register ',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        username: '',
        password: '',
        checkPass: ''
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      console.log(formName)
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          // eslint-disable-next-line standard/object-curly-even-spacing
          const { username, password} = this.ruleForm
          RegisterRequest({username, password})
            .then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message.error(res.msg)
              } else if (res.status === 1) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    login (formName) {
    }
  }
}
</script>
<style scoped lang="less">
#Register{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: url('../../assets/bg.png') no-repeat center;
    .loginWraper{
        width:400px;
        height: 300px;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        border-radius: 4px;
    }
      .title{
        font-size: 20px;
        letter-spacing: 20px;
        width: 250px;
    text-align: right;
    }
    /deep/  .el-input__inner{
        background: rgba(255,255,255,0.6);
    }
    /deep/ .el-button{
        width: 180px;
    }

}
</style>
